<template>
  <div>
    姓名:{{ person.name }} 年龄:{{ person.age }} 车:{{ person.car.c1 }},{{
      person.car.c2
    }}
  </div>
  <button @click="changeName">修改姓名</button>
  <button @click="changeAge">修改年龄</button>
  <button @click="changeC1">修改C1</button>
  <button @click="changeC2">修改C2</button>
  <button @click="changeCar">修改车</button>
</template>
<script setup lang="ts">
import { reactive, watch } from "vue";

let person = reactive({
  name: "张三",
  age: 18,
  car: {
    c1: "雅迪",
    c2: "爱玛",
  },
});

function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age += 1;
}
function changeC1() {
  person.car.c1 = "奔驰";
}
function changeC2() {
  person.car.c2 = "宝马";
}
function changeCar() {
  person.car = {
    c1: "大众",
    c2: "小米su7",
  };
}

//监视,情况五:监视上述的多个数据
watch([() => person.name, person.car], (newVal, oldVal) => {
  console.log("变化了");
});
//简单,直接[]变数组,注意元素转函数,对象可以直接用就行
</script>
